<template>
  <div id="data-view">
    <dv-full-screen-container>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <template v-else>
        <div class="main-header">
          <div class="main-header-left">
            {{ currentTime }}
          </div>
          <div class="main-header-center">
            {{ lineItem ? lineItem.properties.lineName : "" }}看板
          </div>
          <div class="main-header-right">
            <Header-Right @line-change="handleLineChange" />
          </div>
        </div>

        <dv-border-box-1 class="main-containers">
          <div class="left-chart-container">
            <dv-border-box-11 title="生产人员" class="item-container">
              <Left-Chart-1
                :key="key + 'left1'"
                :lineItem="lineItem"
                :data="leftChart1Data"
              />
            </dv-border-box-11>
            <dv-border-box-11 title="产线设备电耗情况" class="item-container">
              <Left-Chart-2
                :key="key + 'left2'"
                :lineItem="lineItem"
                :refreshKey="refreshKey"
              />
            </dv-border-box-11>
            <dv-border-box-11 title="产线灌装水耗情况" class="item-container">
              <Right-Chart-3
                :key="key + 'right3'"
                :lineItem="lineItem"
                :refreshKey="refreshKey"
              />
            </dv-border-box-11>
          </div>
          <div class="center-chart-container">
            <dv-border-box-11 title="产线生产情况" class="item-container">
              <Center-Chart-1
                :key="key + 'center1'"
                :lineItem="lineItem"
                :groupItem="groupItem"
                :refreshKey="refreshKey"
              />
            </dv-border-box-11>

            <dv-border-box-11 title="今日设备运行情况" class="item-container">
              <Right-Chart-2
                :key="key + 'right2'"
                :lineItem="lineItem"
                :refreshKey="refreshKey"
              />
            </dv-border-box-11>
            
            <dv-border-box-11 title="今日各机台耗电情况" class="item-container">
              <Left-Chart-3
                :key="key + 'left3'"
                :lineItem="lineItem"
                :refreshKey="refreshKey"
              />
            </dv-border-box-11>
          </div>

          <div class="right-chart-container">
            <dv-border-box-11 title="品控任务执行情况" class="item-container">
              <Right-Chart-1
                :key="key + 'right3'"
                :lineItem="lineItem"
                :refreshKey="refreshKey"
              />
            </dv-border-box-11>

            <dv-border-box-11
              title="产线原辅料投放情况"
              class="item-container-bottom"
            >
              <Center-Chart-2
                :key="key + 'center2'"
                :lineItem="lineItem"
                :groupItem="groupItem"
                :refreshKey="refreshKey"
              />
            </dv-border-box-11>
          </div>
        </dv-border-box-1>
      </template>
    </dv-full-screen-container>
  </div>
</template>

<script>
import LeftChart1 from "./LeftChart1";
import LeftChart2 from "./LeftChart2";
import LeftChart3 from "./LeftChart3";
import CenterChart1 from "./CenterChart1";
import CenterChart2 from "./CenterChart2";
import RightChart1 from "./RightChart1";
import RightChart2 from "./RightChart2";
import RightChart3 from "./RightChart3";

import HeaderRight from "./HeaderRight.vue";

import { getProducingGroupUserByLineId } from "@/api/dashboard/blowIrriagtionSpinLine";

export default {
  name: "DataView",
  components: {
    LeftChart1,
    LeftChart2,
    LeftChart3,
    CenterChart1,
    CenterChart2,
    RightChart1,
    RightChart2,
    RightChart3,
    HeaderRight,
  },
  data() {
    return {
      loading: true,
      key: new Date().getTime(),
      // 当前时间
      currentTime: this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
      // 当前时间定时器
      currentTimer: null,
      //当前产线
      lineItem: null,
      // 生产人员
      leftChart1Data: null,
      //当前班组
      groupItem: null,
      // 定时器，每1小时刷新一次
      refreshTimer: null,
      // 刷新标识
      refreshKey: new Date().getTime(),
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;

      this.setRefreshTimer();
    }, 1000);

    this.setCurrentTimer();
  },
  methods: {
    // 当前时间定时器
    setCurrentTimer() {
      if (this.currentTimer) {
        clearInterval(this.currentTimer);
      }
      this.currentTimer = setInterval(() => {
        this.currentTime = this.parseTime(
          new Date(),
          "{y}-{m}-{d} {h}:{i}:{s}"
        );
      }, 1000);
    },
    // 轮询
    setRefreshTimer() {
      // 每1分钟刷新一次
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(async () => {
        // 刷新
        await this.getProducingGroupUser();
        this.refreshKey = new Date().getTime();

        // 重置定时器
        this.setRefreshTimer();
      }, 60000);
    },
    // 切换产线
    async handleLineChange(item) {
      // 清除轮询
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }

      this.lineItem = item;

      // 获取生产人员数据，同时从该接口中获取到当前班组
      await this.getProducingGroupUser();

      this.key = new Date().getTime();

      // 重新开始轮询
      this.setRefreshTimer();
    },
    // 获取生产人员数据
    async getProducingGroupUser() {
      if (!this.lineItem) {
        return Promise.reject();
      }
      const { lineId } = this.lineItem.properties;
      const param = {
        lineId,
      };
      try {
        const res = await getProducingGroupUserByLineId(param);
        if (res?.data) {
          const {
            id,
            personDtos,
            groupUserEffeciency,
            groupName,
            groupCode,
            groupId,
            arriveCount,
            signInCount,
            workStartTime,
            startTime,
            endTime,
          } = res.data;

          this.leftChart1Data = {
            data: personDtos,
            groupUserEffeciency: groupUserEffeciency || "",
            groupName: groupName || "",
            arriveCount: arriveCount || "",
            signInCount: signInCount || "",
            workStartTime: workStartTime || "",
          };
          // 更新当前班组
          this.groupItem = {
            id,
            groupName,
            groupCode,
            groupId,
            startTime,
            endTime,
          };
        } else {
          this.leftChart1Data = null;
          this.groupItem = null;
        }
      } catch (error) {
        this.leftChart1Data = null;
        this.groupItem = null;
      }
    },
  },
  beforeDestroy() {
    // 清除轮询
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
    if (this.currentTimer) {
      clearInterval(this.currentTimer);
    }
  },
  deactivated() {
    // 清除轮询
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
    if (this.currentTimer) {
      clearInterval(this.currentTimer);
    }
  },
};
</script>

<style lang="scss" scoped>
#data-view {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("~@/assets/images/kanban/kanban_bg1.png");
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    padding: 20px 50px;
    justify-content: space-between;
    align-items: center;

    &-left {
      width: 250px;
      font-size: 18px;
      font-weight: 600;
      color: rgba(255, 255, 255, 90%);
    }
    &-center {
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      color: #00ffff;
    }
    &-right {
      width: 250px;

      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .mh-left {
      font-size: 20px;
      color: rgb(1, 134, 187);

      a:visited {
        color: rgb(1, 134, 187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left,
    .mh-right {
      width: 450px;
    }
  }

  .main-containers {
    height: calc(100% - 80px);

    ::v-deep .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 33.33%;
    // padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .border-box-content {
      flex-direction: column;
    }
  }

  .center-chart-container {
    width: 33.33%;
    // padding-left: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .right-chart-container {
    width: 33.33%;
    // padding-left: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .item-container {
    height: 33%;
    padding: 6px;
  }
  .item-container-bottom {
    height: 66.5%;
    padding: 6px;
  }

  // .rmc-top-container {
  //   height: 65%;
  //   display: flex;
  // }

  // .rmctc-left-container {
  //   width: 65%;
  // }

  // .rmctc-right-container {
  //   width: 35%;
  // }

  // .rmc-bottom-container {
  //   height: 35%;
  // }

  // .rmctc-chart-1,
  // .rmctc-chart-2 {
  //   height: 50%;
  // }

  // ----------
  .line-decoration-1 {
    width: 100%;
    height: 25px;
    border-bottom: 1px solid rgba(81, 102, 165, 70%);
  }
}
</style>
